<%--
  Created by IntelliJ IDEA.
  User: yyf19
  Date: 2019/6/14
  Time: 17:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>商品</title>
    <%@ include file="/WEB-INF/jsp/include/head.jsp" %>
    <style>
        #product-img {
            width: 420px;
            height: 420px;
        }

        #product-subtitle {
            color: #c00;
        }

        #product-price {
            vertical-align: middle;
            font-size: 30px;
            color: #FF0036;
            font-weight: bolder;
            font-family: Arial;
            -webkit-font-smoothing: antialiased;
        }
    </style>
</head>
<body>
<div>
    <%@ include file="/WEB-INF/jsp/include/nav.jsp" %>

</div>
<div class="container" id="product-box">
    <hr/>
    <div class="row">
        <div class="col-md-6">
            <img src="" alt="" id="product-img">
        </div>
        <div class="col-md-6">
            <div class="col-md-12"><h3 id="product-name"></h3></div>
            <div class="col-md-12"><p id="product-subtitle"></p></div>
            <div class="col-md-12"><p id="product-price"></p></div>
            <div class="col-md-12" style="margin-top: 20px;">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="inputQuantity" class="font-weight">数量：</label>
                        <div class="input-group">
                            <%--                            <div class="input-group-addon" onclick="changeInputQuantity(-1)">-</div>--%>
                            <input type="number" class="form-control" id="inputQuantity" value="1" style="width: 60px"
                                   max="99" min="1" step="1"
                                   onchange="changeInputQuantity(this)">
                            <%--                            <div class="input-group-addon" onclick="changeInputQuantity(1)">+</div>--%>
                        </div>
                        &nbsp;&nbsp;&nbsp;
                        <label for="inputQuantity" id="product-stock" class="font-weight"></label>
                    </div>
                    <br/>
                    <br/>
                    <div class="form-group">
                        <button type="button" class="btn btn-default" onclick="addToCart()">加入购物车</button>
                    </div>
                </form>
            </div>
        </div>
        <div class="col-md-12" style="margin-top: 50px;">
            <hr/>
            <p id="product-detail"></p>
        </div>
    </div>
</div>

</body>
<%@ include file="/WEB-INF/jsp/include/bodyfoot.jsp" %>
<script>
    var product;
    var url = serverApp + "/product/get/${productId}";
    $GET(url, function (result) {
        product = result;
        $("#product-img").attr("src", result.mainImage)
        $("#product-name").html(result.name)
        $("#product-subtitle").html(result.subtitle)
        $("#product-stock").html("库存：" + result.stock)
        $("#product-price").html("￥" + keep2smallNumber(result.price))
        $("#product-detail").html(result.detail)
    })

    function changeInputQuantity(mythis) {
        var old = $(mythis).val()
        if (old < 1) {
            $(mythis).val(1)
        } else if (old > 99) {
            $(mythis).val(99)
        }
    }

    var addToCartUrl = serverApp + "/user/${SESSION_USER.id}/cart/add"
    var addToCartData = {
        productId:${productId}
    }

    function addToCart() {
        addToCartData.quantity = parseInt($("#inputQuantity").val())
        $POST_JSON(addToCartUrl, addToCartData, function (res) {
            console.log(res)
        })
    }
</script>
</html>
